<template>
	<view class="">
		<view class="column center top-qrcode-con">
			<view class="qrcode" style="margin: 40upx 0;"><image :src="qrcode" class="qrcode"></image></view>
			<view class="share-btn-con">
				<view class="share-btn">分享好友</view>
				<button open-type="share" class="share"></button>
			</view>
		</view>
		<view class="share-iv top-qrcode-con">
			<view class="iv-t">如何赚钱？</view>
			<view class="iv-ct">第一步：转发商品链接或商品图片给微信好友</view>
			<view class="iv-ct">
				第二步：从您转发的链接或图片进入商城的好友，系统将自动锁定成为您的客户，他们在商城中购买任何商品，您都可以获得商品的抽佣；
			</view>
			<view class="iv-ct">第三步：您可以在我的推广中查看【我的团队】和【团队订单】好友确认收货后佣金方可提现</view>
			<view class="iv-cr">
				<view class="iv-s">说明：</view>
				<view class="iv-c" style="padding-top:30upx;">
					分享后会带有独有的推荐码，您的好友访问之后，系统会自动检测并记录客户关系。如果您的好友已经被其他人抢先发展成了客户，他就不能成为您的客户，以最早发展成为客户为准。
				</view>
			</view>
		</view>
		<view class="tkiQrcode">
			<tki-qrcode
				cid="qrcode2307"
				:val="path"
				:size="size"
				:loadMake="true"
				ref="qrcode2307"
				class="qrcode"
				@result="qrcodeComplete"
			></tki-qrcode>
		</view>
	</view>
</template>

<script>
const bassUrl = require("@/common/js/config.js").bass;
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue";
export default {
	components: {
		tkiQrcode
	},
	data() {
		return {
			size: 223,
			qrcode: ""
		};
	},

	computed: {
		path() {
			return `${bassUrl}/index?scene=${uni.getStorageSync("uid")}`;
		}
	},
	onShareAppMessage() {
		return {
			path: `/pages/tabs/home?inviteId=${uni.getStorageSync("uid")}`
		};
	},
	methods: {
		qrcodeComplete(result) {
			this.qrcode = result;
		}
	}
};
</script>

<style scoped>
.share-iv {
	margin-top: 40upx;
}
.iv-t {
	font-size: 30upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
	line-height: 80upx;
}
.iv-cr {
	padding: 30upx;
	background: #f6f6f6;
	border-radius: 10upx;
	margin-top: 40upx;
}
.iv-s {
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 41upx;
}
.iv-ct {
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #666666;
	line-height: 48upx;
}
.iv-c {
	font-size: 24upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
	line-height: 41upx;
}
.top-qrcode-con {
	padding: 20upx;
}
.tkiQrcode {
	position: fixed;
	top: -99999px;
}
.qrcode {
	width: 223upx;
	height: 223upx;
}
.share-btn {
	width: 213upx;
	height: 60upx;
	text-align: center;
	line-height: 60upx;
	background: #ffe5e4;
	border-radius: 30upx;
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #99130c;
}
.share-btn-con {
	position: relative;
}
.share {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	opacity: 0;
}
</style>
